<script setup lang="ts">
import { computed } from "vue";
const props = defineProps({
  url: {
    type: String,
    default: "",
  },
  size: {
    type: Number || String,
    default: 50,
  },
});
const domStyle = computed(() => {
  return {
    width: parseInt(props.size+'') + "px",
    height:parseInt(props.size+'') + "px",
  };
});
</script>

<template>
  <div class="x-avatar" :style="domStyle">
   <image class="x-avatar-img" mode="widthFix" v-if="props.url" :src="props.url" />
   <i v-else class="iconfont icon icon-yonghu"></i>
  </div>
</template>

<style lang="scss" scoped>
.x-avatar {
    border-radius: 50%;
    overflow: hidden;
    background-color: #d0d0d0;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon{
      font-size: 24px;
      color: #fff;
    }
    &-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
</style>
